<template>
  <div class="container">
    <div class="left">
      <img
        data-v-5f4cd9ca=""
        class="w-full h-full"
        src="../assets/images/login-background.png"
        alt="login"
      />
    </div>
    <div class="login">
      <el-form
        ref="loginRef"
        :model="loginForm"
        :rules="loginRules"
        class="login-form"
      >
        <div style="display: flex; justify-content: center">
          <div>
            <img
              src="../assets/logo/logo.png"
              alt="logo"
              style="width: 40px; height: 40px"
            />
          </div>
          <h3 class="title">道路运输车辆管理系统</h3>
        </div>
        <el-form-item prop="phone">
          <el-input
            v-model="loginForm.phone"
            type="text"
            size="large"
            auto-complete="off"
            placeholder="请输入手机号"
          >
            <template #prefix
              ><svg-icon icon-class="user" class="el-input__icon input-icon"
            /></template>
          </el-input>
        </el-form-item>
        <el-form-item prop="password">
          <el-input
            v-model="loginForm.password"
            type="password"
            size="large"
            auto-complete="off"
            placeholder="请输入密码"
            @keyup.enter="handleLogin"
          >
            <template #prefix
              ><svg-icon
                icon-class="password"
                class="el-input__icon input-icon"
            /></template>
          </el-input>
        </el-form-item>
        <!-- <el-form-item prop="code" v-if="captchaEnabled">
           <el-input
            v-model="loginForm.code"
            size="large"
            auto-complete="off"
            placeholder="验证码"
            style="width: 63%"
            @keyup.enter="handleLogin"
          >
            <template #prefix><svg-icon icon-class="validCode" class="el-input__icon input-icon" /></template>
          </el-input>
          <div class="login-code">
            <img :src="codeUrl" @click="getCode" class="login-code-img"/>
          </div> 
        </el-form-item> -->
        <div class="text text_bottom">
          登录即表示同意江西携车通
          <span class="skyblue">平台服务协议</span>
          与
          <span class="skyblue">用户隐私政策</span>
        </div>
        <!-- <el-checkbox v-model="loginForm.rememberMe" style="margin:0px 0px 25px 0px;">记住密码</el-checkbox> -->
        <el-form-item style="width: 100%">
          <el-button round size="large" class="text_bot" @click="resetForm">
            <el-icon style="vertical-align: middle">
              <CircleClose />
            </el-icon>
            <span>重 置</span>
          </el-button>

          <el-button
            :loading="loading"
            size="large"
            type="primary"
            round
            @click.prevent="handleLogin"
            class="text_bot"
          >
            <span v-if="!loading">登 录</span>
            <span v-else>登 录 中...</span>
          </el-button>
          <div style="float: right" v-if="register">
            <router-link class="link-type" :to="'/register'"
              >立即注册</router-link
            >
          </div>
        </el-form-item>
      </el-form>
      <!--  底部  -->
      <div class="el-login-footer">
        <span>Copyright © 2018-2024 ruoyi.vip All Rights Reserved.</span>
      </div>
    </div>
  </div>
</template>

<script setup>
// import { getCodeImg } from "@/api/login";
import Cookies from 'js-cookie'
import { encrypt, decrypt } from '@/utils/jsencrypt'
// 引入pinia
import useUserStore from '@/store/modules/user'
// import request from '@/utils/request.js'

const userStore = useUserStore()
// 引入路由对象
const route = useRoute()
const router = useRouter()
// 获取当前组件对象
const { proxy } = getCurrentInstance()

// 表单数据对象
const loginForm = ref({
  phone: '18770768159ll',
  password: '18770768159ll',
  rememberMe: false,
  code: '',
  uuid: '',
})
// 表单验证规则对象数组
const loginRules = {
  phone: [{ required: true, trigger: 'blur', message: '请输入用户手机号' }],
  password: [{ required: true, trigger: 'blur', message: '请输入密码' }],
  // code: [{ required: true, trigger: "change", message: "请输入验证码" }]
}

const codeUrl = ref('')
const loading = ref(false)
// 验证码开关
const captchaEnabled = ref(true)
// 注册开关
const register = ref(false)
const redirect = ref(undefined)

watch(
  route,
  (newRoute) => {
    redirect.value = newRoute.query && newRoute.query.redirect
  },
  { immediate: true }
)

// 点击登录按钮后的事件处理函数
function handleLogin() {
  // 找到表单进行表单验证
  proxy.$refs.loginRef.validate((valid) => {
    console.log(valid)
    // valid是验证的结果，true表示验证通过
    if (valid) {
      // 开启loading提示
      loading.value = true
      // // 勾选了需要记住密码设置在 cookie 中设置记住用户名和密码
      // if (loginForm.value.rememberMe) {
      //   Cookies.set("username", loginForm.value.username, { expires: 30 });
      //   Cookies.set("password", encrypt(loginForm.value.password), { expires: 30 });
      //   Cookies.set("rememberMe", loginForm.value.rememberMe, { expires: 30 });
      // } else {
      //   // 否则移除
      //   Cookies.remove("username");
      //   Cookies.remove("password");
      //   Cookies.remove("rememberMe");
      // }

      // const params = new URLSearchParams();
      // params.append('phone', '15727765574');
      // params.append('password', '15727765574');

      // request({
      //   url: '/pc/user/auth/login',
      //   method: "post",
      //   data: params
      // }).then(res => {
      //   console.log(res)
      // }).catch(err => {
      //   console.log('err:', err)
      // })
      // 调用pinia 中的 action的登录方法，即 src/store/modules/user.js 文件中的 login 函数
      // console.log('login before')
      userStore
        .login(loginForm.value)
        .then(() => {
          const query = route.query
          const otherQueryParams = Object.keys(query).reduce((acc, cur) => {
            if (cur !== 'redirect') {
              acc[cur] = query[cur]
            }
            return acc
          }, {})
          // router 是路由对象，push是跳转， path设置跳转路径
          router.push({ path: '/' })
          // router.push({ path: redirect.value || "/", query: otherQueryParams });
        })
        .catch((err) => {
          loading.value = false
          // console.log(err)
          if (err.code == 500) {
            proxy.$message.error(err.error)
          } else {
            proxy.$message.error(JSON.stringify(err))
          }
          // // 重新获取验证码
          // if (captchaEnabled.value) {
          //   getCode();
          // }
        })
    }
  })
}

function getCode() {
  // getCodeImg().then(res => {
  //   captchaEnabled.value = res.captchaEnabled === undefined ? true : res.captchaEnabled;
  //   if (captchaEnabled.value) {
  //     codeUrl.value = "data:image/gif;base64," + res.img;
  //     loginForm.value.uuid = res.uuid;
  //   }
  // });
}

function getCookie() {
  const phone = Cookies.get('phone')
  const password = Cookies.get('password')
  const rememberMe = Cookies.get('rememberMe')
  loginForm.value = {
    phone: phone === undefined ? loginForm.value.phone : phone,
    password:
      password === undefined ? loginForm.value.password : decrypt(password),
    rememberMe: rememberMe === undefined ? false : Boolean(rememberMe),
  }
}

// 重置表单的方法
function resetForm() {
  proxy.$refs.loginRef.resetFields()
}

getCode()
getCookie()
</script>

<style lang="scss" scoped>
.container {
  display: flex;
  align-items: center;
  height: 100%;

  .left {
    width: 800px;

    img {
      width: 100%;
    }
  }

  .login {
    width: 450px;
    padding: 50px;
    box-shadow: 0 25px 50px -12px rgba(0 0 0 / 0.25);

    .text_bottom {
      margin-bottom: 0.5rem;
    }
    .text_bot {
      width: 200px;
      flex-wrap: nowrap !important;
    }
    ::v-deep .el-form-item__content {
      flex-wrap: nowrap;
    }
  }
}

// .login {
//   display: flex;
//   justify-content: center;
//   align-items: center;
//   height: 100%;
//   // background-image: url("../assets/images/login-background.png");
//   background-size: cover;
// }
.title {
  // margin: 0px auto 30px auto;
  text-align: center;
  color: #707070;
}

.login-form {
  border-radius: 6px;
  background: #ffffff;
  width: 100%;

  .el-input {
    height: 40px;

    input {
      height: 40px;
    }
  }

  .input-icon {
    height: 39px;
    width: 14px;
    margin-left: 0px;
  }
}

.login-tip {
  font-size: 13px;
  text-align: center;
  color: #bfbfbf;
}

.login-code {
  width: 33%;
  height: 40px;
  float: right;

  img {
    cursor: pointer;
    vertical-align: middle;
  }
}

.el-login-footer {
  height: 40px;
  line-height: 40px;
  position: fixed;
  bottom: 0;
  width: 100%;
  text-align: center;
  color: #fff;
  font-family: Arial;
  font-size: 12px;
  letter-spacing: 1px;
}

.login-code-img {
  height: 40px;
  padding-left: 12px;
}
</style>
